<template>
  <div class="wrap-bg">
    <div class="title">请选择开团类型</div>
    <div class="content">
      <div class="con-item0">
        <div
          class="con-item0-content flex flexC"
          @click="handleRouteJump('ordinary')"
        >
          <img src="../../assets/center/add.png" alt="" />
          <div class="add-txt">创建普通团购</div>
        </div>
      </div>
      <div class="con-item1">
        <div
          class="con-item0-content flex flexC"
          @click="handleRouteJump('community')"
        >
          <img src="../../assets/center/add.png" alt="" />
          <div>
            <div class="add-txt">创建小区团购</div>
            <div class="tips">按照小区提货点的配送模式</div>
          </div>
        </div>
      </div>
      <div class="look" @click="goToPrivacy">
        《微团购禁发商品和信息管理规范》
      </div>
    </div>

    <section v-if="isFirst !== 'false'">
      <guideStep2></guideStep2>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import type { IRouteMap, TJumpRoute } from "./type";
import guideStep2 from "./components/Guide2.vue";
let isFirst = localStorage.getItem("wtgFirst");
// - router
const router = useRouter();

// - data
const routeMap: IRouteMap = {
  ordinary: "/ordinary",
  community: "/community",
};

// - methods
const handleRouteJump = (path: TJumpRoute) => {
  router.push(routeMap[path]);
};
const goToPrivacy = () => {
  router.push("/privacy");
};
</script>

<style scoped lang="scss">
.wrap-bg {
  padding: 0 60px;
  height: 100%;
  background: linear-gradient(
    134deg,
    #dcf9e8 0%,
    #e8f9e0 31%,
    #fbfad3 57%,
    #ffffff 100%
  );
  // backdrop-filter: blur(50px);
  .title {
    position: relative;
    top: 132px;
    color: #000;
    font-size: 50px;
    font-weight: 500;
  }
  .content {
    position: relative;
    top: 188px;
    .look {
      padding-top: 50px;
      color: #40ae36;
      font-size: 26px;
      text-align: center;
    }
  }
  .con-item0 {
    background: url("../../assets/center/green.png") no-repeat center;
  }
  .con-item1 {
    margin-top: 30px;
    background: url("../../assets/center/orange.png") no-repeat center;
  }

  .con-item0,
  .con-item1 {
    height: 230px;
    background-size: 100% 100%;
  }
  .con-item0-content {
    padding: 0 40px;
    height: 200px;
    img {
      width: 76px;
      height: 76px;
      display: block;
    }
    .add-txt {
      font-size: 34px;
      color: #fff;
      font-weight: 500;
      padding-left: 26px;
    }
    .tips {
      font-size: 26px;
      color: #fff;
      padding-left: 26px;
    }
  }
}
</style>
